<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX请求</title>
</head>
<body>
  <script>
    // 接口地址：https://api.apiopen.top/getJoke
    let url = 'https://api.apiopen.top/getJoke';

    // 原生形式
    // 1、创建 ajax 对象
    const xhr = new XMLHttpRequest();
    // 2、初始化
    xhr.open('GET', url);
    // 3、发送
    xhr.send();
    // 4、绑定请求状态改变事件
    xhr.onreadystatechange = function() {
      // 判断请求状态
      if (xhr.readyState === 4) {
        // 判断状态码
        if (xhr.status >= 200 && xhr.status < 300) {
          // 页面输出响应数据
          document.write(xhr.response);
        } else {
          // 页面输出响应状态码
          document.write(xhr.status);
        }
      }
    }

    // Promise 形式
    const p = new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url);
      xhr.send();
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(xhr.response);
          } else {
            reject(xhr.status);
          }
        }
      }
    });
    p.then(value => {
      console.log(value); // 控制台打印响应数据
    }, reason => {
      console.log(reason); // 控制台打印响应状态码
    });
  </script>
</body>
</html>